<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <title>CSS3 border-radius 属性</title>
    <style>
        #rcorners1 {
            border-radius: 25px;
            background: #8AC007;
            padding: 20px;
            width: 200px;
            height: 150px;
        }

        #rcorners2 {
            border-radius: 25px;
            border: 2px solid #8AC007;
            padding: 20px;
            width: 200px;
            height: 150px;
        }

        #rcorners3 {
            border-radius: 25px;
            background: url('images/paper.gif');
            background-position: left top;
            background-repeat: repeat;
            padding: 20px;
            width: 200px;
            height: 150px;
        }
    </style>
</head>

<body>

    <p> border-radius 属性允许向元素添加圆角。</p>
    <p>指定背景颜色元素的圆角:</p>
    <p id="rcorners1">圆角</p>
    <p>指定边框元素的圆角:</p>
    <p id="rcorners2">圆角</p>
    <p>指定背景图片元素的圆角:</p>
    <p id="rcorners3">圆角</p>

</body>

</html>